{% extends "base.html" %}

{% block title %}评价详情 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}评价详情{% endblock %}

{% block extra_css %}
<style>
    .evaluation-detail {
        max-width: 800px;
        margin: 0 auto;
    }

    .course-info-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .course-info-card h4 {
        margin-bottom: 20px;
        color: white;
    }

    .course-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 15px;
    }

    .course-meta-item {
        background: rgba(255,255,255,0.2);
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.9rem;
    }

    .evaluation-section {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-left: 4px solid #ff6b6b;
    }

    .evaluation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e9ecef;
    }

    .evaluation-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        color: #333;
    }

    .evaluation-title i {
        color: #ff6b6b;
    }

    .rating-display {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 15px 0;
    }

    .stars-large {
        font-size: 1.8rem;
        color: #ffc107;
    }

    .rating-text {
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
    }

    .rating-score {
        background: #ff6b6b;
        color: white;
        padding: 8px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 1.1rem;
    }

    .comment-content {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 15px;
        font-style: italic;
        line-height: 1.6;
        color: #555;
        border-left: 3px solid #ff6b6b;
    }

    .comment-empty {
        color: #999;
        font-style: italic;
        text-align: center;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px dashed #dee2e6;
    }

    .evaluation-time {
        font-size: 0.9rem;
        color: #6c757d;
        margin-top: 10px;
    }

    .status-badge {
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .status-completed {
        background: #d4edda;
        color: #155724;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
    }

    .status-partial {
        background: #d1ecf1;
        color: #0c5460;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e9ecef;
    }

    .btn-edit {
        background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
        border: none;
        color: white;
        font-weight: 500;
    }

    .btn-edit:hover {
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255,193,7,0.3);
    }

    .back-link {
        margin-bottom: 20px;
    }

    .completion-status {
        text-align: center;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
    }

    .completion-status.completed {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .completion-status.partial {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .mutual-rating-summary {
        display: flex;
        justify-content: space-around;
        text-align: center;
        padding: 20px;
        background: #e3f2fd;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .rating-summary-item h5 {
        color: #1976d2;
        margin-bottom: 10px;
    }

    .rating-summary-item .stars-medium {
        font-size: 1.5rem;
        color: #ffc107;
        margin: 5px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="back-link">
        <a href="{{ url_for('evaluations.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left"></i> 返回评价列表
        </a>
    </div>

    <div class="evaluation-detail">
        <!-- 课程信息卡片 -->
        <div class="course-info-card">
            <h4><i class="fas fa-table-tennis"></i> 课程信息</h4>
            <div class="row">
                <div class="col-md-6">
                    <strong>学员：</strong> {{ evaluation_data.student.real_name or evaluation_data.student.username }}
                </div>
                <div class="col-md-6">
                    <strong>教练：</strong> {{ evaluation_data.coach.real_name or evaluation_data.coach.username }}
                </div>
            </div>
            <div class="course-meta">
                <div class="course-meta-item">
                    <i class="fas fa-calendar"></i>
                    {{ evaluation_data.reservation.reservation_date.strftime('%Y年%m月%d日') }}
                </div>
                <div class="course-meta-item">
                    <i class="fas fa-clock"></i>
                    {{ evaluation_data.reservation.start_time.strftime('%H:%M') }} -
                    {{ evaluation_data.reservation.end_time.strftime('%H:%M') }}
                </div>
                <div class="course-meta-item">
                    <i class="fas fa-map-marker-alt"></i>
                    {{ evaluation_data.reservation.table.name if evaluation_data.reservation.table else '未知球台' }}
                </div>
                {% if evaluation_data.reservation.price %}
                <div class="course-meta-item">
                    <i class="fas fa-yen-sign"></i>
                    ¥{{ "%.2f"|format(evaluation_data.reservation.price) }}
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 评价完成状态 -->
        {% if evaluation_data.evaluation.is_completed %}
            <div class="completion-status completed">
                <h5><i class="fas fa-check-circle"></i> 双方评价已完成</h5>
                <p class="mb-0">本次课程的评价已完成，感谢您的参与！</p>
            </div>

            <!-- 互评摘要 -->
            <div class="mutual-rating-summary">
                <div class="rating-summary-item">
                    <h5>学员评价</h5>
                    {% if evaluation_data.evaluation.student_rating %}
                        <div class="stars-medium">
                            {% for i in range(evaluation_data.evaluation.student_rating) %}★{% endfor %}
                            {% for i in range(5 - evaluation_data.evaluation.student_rating) %}☆{% endfor %}
                        </div>
                        <div>{{ evaluation_data.evaluation.student_rating }} / 5</div>
                    {% else %}
                        <div class="text-muted">未评价</div>
                    {% endif %}
                </div>
                <div class="rating-summary-item">
                    <h5>教练评价</h5>
                    {% if evaluation_data.evaluation.coach_rating %}
                        <div class="stars-medium">
                            {% for i in range(evaluation_data.evaluation.coach_rating) %}★{% endfor %}
                            {% for i in range(5 - evaluation_data.evaluation.coach_rating) %}☆{% endfor %}
                        </div>
                        <div>{{ evaluation_data.evaluation.coach_rating }} / 5</div>
                    {% else %}
                        <div class="text-muted">未评价</div>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="completion-status partial">
                <h5><i class="fas fa-clock"></i> 评价进行中</h5>
                <p class="mb-0">
                    {% if evaluation_data.evaluation.student_rating and not evaluation_data.evaluation.coach_rating %}
                        学员已完成评价，等待教练评价
                    {% elif evaluation_data.evaluation.coach_rating and not evaluation_data.evaluation.student_rating %}
                        教练已完成评价，等待学员评价
                    {% else %}
                        双方均未完成评价
                    {% endif %}
                </p>
            </div>
        {% endif %}

        <!-- 学员评价 -->
        <div class="evaluation-section">
            <div class="evaluation-header">
                <h5 class="evaluation-title">
                    <i class="fas fa-user-graduate"></i>
                    学员评价
                </h5>
                {% if evaluation_data.evaluation.student_rating %}
                    <span class="status-badge status-completed">已评价</span>
                {% else %}
                    <span class="status-badge status-pending">待评价</span>
                {% endif %}
            </div>

            {% if evaluation_data.evaluation.student_rating %}
                <div class="rating-display">
                    <div class="stars-large">
                        {% for i in range(evaluation_data.evaluation.student_rating) %}★{% endfor %}
                        {% for i in range(5 - evaluation_data.evaluation.student_rating) %}☆{% endfor %}
                    </div>
                    <div class="rating-score">{{ evaluation_data.evaluation.student_rating }}/5</div>
                    <div class="rating-text">
                        {% if evaluation_data.evaluation.student_rating == 5 %}非常满意
                        {% elif evaluation_data.evaluation.student_rating == 4 %}满意
                        {% elif evaluation_data.evaluation.student_rating == 3 %}一般
                        {% elif evaluation_data.evaluation.student_rating == 2 %}不满意
                        {% else %}很不满意{% endif %}
                    </div>
                </div>

                {% if evaluation_data.evaluation.student_comment %}
                    <div class="comment-content">
                        <i class="fas fa-quote-left"></i>
                        {{ evaluation_data.evaluation.student_comment }}
                        <i class="fas fa-quote-right"></i>
                    </div>
                {% endif %}

                {% if evaluation_data.evaluation.student_submitted_at %}
                    <div class="evaluation-time">
                        <i class="fas fa-clock"></i>
                        评价时间：{{ evaluation_data.evaluation.student_submitted_at.strftime('%Y年%m月%d日 %H:%M') }}
                    </div>
                {% endif %}
            {% else %}
                <div class="comment-empty">
                    <i class="fas fa-star-o fa-2x mb-3"></i>
                    <div>学员尚未提交评价</div>
                </div>
            {% endif %}
        </div>

        <!-- 教练评价 -->
        <div class="evaluation-section">
            <div class="evaluation-header">
                <h5 class="evaluation-title">
                    <i class="fas fa-chalkboard-teacher"></i>
                    教练评价
                </h5>
                {% if evaluation_data.evaluation.coach_rating %}
                    <span class="status-badge status-completed">已评价</span>
                {% else %}
                    <span class="status-badge status-pending">待评价</span>
                {% endif %}
            </div>

            {% if evaluation_data.evaluation.coach_rating %}
                <div class="rating-display">
                    <div class="stars-large">
                        {% for i in range(evaluation_data.evaluation.coach_rating) %}★{% endfor %}
                        {% for i in range(5 - evaluation_data.evaluation.coach_rating) %}☆{% endfor %}
                    </div>
                    <div class="rating-score">{{ evaluation_data.evaluation.coach_rating }}/5</div>
                    <div class="rating-text">
                        {% if evaluation_data.evaluation.coach_rating == 5 %}非常满意
                        {% elif evaluation_data.evaluation.coach_rating == 4 %}满意
                        {% elif evaluation_data.evaluation.coach_rating == 3 %}一般
                        {% elif evaluation_data.evaluation.coach_rating == 2 %}不满意
                        {% else %}很不满意{% endif %}
                    </div>
                </div>

                {% if evaluation_data.evaluation.coach_comment %}
                    <div class="comment-content">
                        <i class="fas fa-quote-left"></i>
                        {{ evaluation_data.evaluation.coach_comment }}
                        <i class="fas fa-quote-right"></i>
                    </div>
                {% endif %}

                {% if evaluation_data.evaluation.coach_submitted_at %}
                    <div class="evaluation-time">
                        <i class="fas fa-clock"></i>
                        评价时间：{{ evaluation_data.evaluation.coach_submitted_at.strftime('%Y年%m月%d日 %H:%M') }}
                    </div>
                {% endif %}
            {% else %}
                <div class="comment-empty">
                    <i class="fas fa-star-o fa-2x mb-3"></i>
                    <div>教练尚未提交评价</div>
                </div>
            {% endif %}
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            {% if current_user.role == 'student' %}
                {% if not evaluation_data.evaluation.student_rating %}
                    <a href="{{ url_for('evaluations.create', reservation_id=evaluation_data.reservation.id) }}"
                       class="btn btn-success">
                        <i class="fas fa-star"></i> 立即评价
                    </a>
                {% elif evaluation_data.can_modify_student %}
                    <a href="{{ url_for('evaluations.edit', evaluation_id=evaluation_data.evaluation.id) }}"
                       class="btn btn-edit">
                        <i class="fas fa-edit"></i> 修改评价
                    </a>
                {% endif %}
            {% elif current_user.role == 'coach' %}
                {% if not evaluation_data.evaluation.coach_rating %}
                    <a href="{{ url_for('evaluations.create', reservation_id=evaluation_data.reservation.id) }}"
                       class="btn btn-success">
                        <i class="fas fa-star"></i> 立即评价
                    </a>
                {% elif evaluation_data.can_modify_coach %}
                    <a href="{{ url_for('evaluations.edit', evaluation_id=evaluation_data.evaluation.id) }}"
                       class="btn btn-edit">
                        <i class="fas fa-edit"></i> 修改评价
                    </a>
                {% endif %}
            {% endif %}

            <a href="{{ url_for('evaluations.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-list"></i> 返回列表
            </a>

            {% if current_user.role in ['admin'] %}
            <a href="#" class="btn btn-outline-info" onclick="exportEvaluation()">
                <i class="fas fa-download"></i> 导出评价
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 工具提示
    $('[data-bs-toggle="tooltip"]').tooltip();

    // 如果评价完成，添加庆祝效果
    {% if evaluation_data.evaluation.is_completed %}
        // 可以添加一些庆祝动画或效果
        $('.completion-status.completed').addClass('animate__animated animate__fadeIn');
    {% endif %}
});

// 导出评价（管理员功能）
function exportEvaluation() {
    var evaluationData = {
        course: {
            date: '{{ evaluation_data.reservation.reservation_date.strftime("%Y年%m月%d日") }}',
            time: '{{ evaluation_data.reservation.start_time.strftime("%H:%M") }} - {{ evaluation_data.reservation.end_time.strftime("%H:%M") }}',
            student: '{{ evaluation_data.student.real_name or evaluation_data.student.username }}',
            coach: '{{ evaluation_data.coach.real_name or evaluation_data.coach.username }}',
            table: '{{ evaluation_data.reservation.table.name if evaluation_data.reservation.table else "未知球台" }}'
        },
        student_evaluation: {
            rating: {{ evaluation_data.evaluation.student_rating or 'null' }},
            comment: {{ evaluation_data.evaluation.student_comment|tojson if evaluation_data.evaluation.student_comment else 'null' }},
            time: {{ evaluation_data.evaluation.student_submitted_at.strftime('%Y年%m月%d日 %H:%M')|tojson if evaluation_data.evaluation.student_submitted_at else 'null' }}
        },
        coach_evaluation: {
            rating: {{ evaluation_data.evaluation.coach_rating or 'null' }},
            comment: {{ evaluation_data.evaluation.coach_comment|tojson if evaluation_data.evaluation.coach_comment else 'null' }},
            time: {{ evaluation_data.evaluation.coach_submitted_at.strftime('%Y年%m月%d日 %H:%M')|tojson if evaluation_data.evaluation.coach_submitted_at else 'null' }}
        }
    };

    // 生成导出内容
    var content = "课程评价详情\n";
    content += "================\n\n";
    content += "课程信息：\n";
    content += "- 日期：" + evaluationData.course.date + "\n";
    content += "- 时间：" + evaluationData.course.time + "\n";
    content += "- 学员：" + evaluationData.course.student + "\n";
    content += "- 教练：" + evaluationData.course.coach + "\n";
    content += "- 球台：" + evaluationData.course.table + "\n\n";

    content += "学员评价：\n";
    if (evaluationData.student_evaluation.rating) {
        content += "- 评分：" + evaluationData.student_evaluation.rating + "/5\n";
        content += "- 评价时间：" + evaluationData.student_evaluation.time + "\n";
        if (evaluationData.student_evaluation.comment) {
            content += "- 评价内容：" + evaluationData.student_evaluation.comment + "\n";
        }
    } else {
        content += "- 未评价\n";
    }

    content += "\n教练评价：\n";
    if (evaluationData.coach_evaluation.rating) {
        content += "- 评分：" + evaluationData.coach_evaluation.rating + "/5\n";
        content += "- 评价时间：" + evaluationData.coach_evaluation.time + "\n";
        if (evaluationData.coach_evaluation.comment) {
            content += "- 评价内容：" + evaluationData.coach_evaluation.comment + "\n";
        }
    } else {
        content += "- 未评价\n";
    }

    // 下载文件
    var blob = new Blob([content], {type: 'text/plain;charset=utf-8'});
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '评价详情_' + evaluationData.course.date + '.txt';
    link.click();
}
</script>
{% endblock %}